import React from 'react';
import { _s2Int, openLinkUrl } from '../../util/common';
import {WeaLocaleProvider} from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;
//幻灯片元素
class SlideCom extends React.Component {
    componentDidUpdate() {
        const { eid, isSetting, esetting } = this.props;

        const { iconImgList, iconImg_overList, values } = esetting;
        if (values) {
            loadSlideCss(eid, isSetting, iconImgList, iconImg_overList, values);
        }
    }
    componentDidMount() {
        const { eid, isSetting, esetting } = this.props;

        const { iconImgList, iconImg_overList, values } = esetting;
        if (values) {
            loadSlideCss(eid, isSetting, iconImgList, iconImg_overList, values);
        }
    }
    render() {
        const { eid, data = [], esetting={} } = this.props;
        const { values } = esetting;
        const sposition = values ? values['slide_t_position'] : '0';
        const fontSize = values ? values['fontSize'] : '16';
        const showTitle = values ? values['showTitle'] : '0';
        const showType = values ? values['showType'] : '1';

        let titleStyle= {
            backgroundColor: '#332a2a',
            color: 'rgb(255, 255, 255)',
            fontSize: fontSize+ 'px'
        }
        if( showType == '2'){
            titleStyle= {
                backgroundColor: 'rgb(255, 255, 255)',
                color: 'black',
                fontSize: fontSize+ 'px'
            }
        }

        let isAuto = values ? values['slide_t_picShow'] : 'normal';
        var sdStyle = {
            background: 'url(\"\") no-repeat',
            cursor: 'pointer',
            position: 'relative'
        }
        var scStyle = {
            cursor: 'pointer'
        };
        let imgStyle = isAuto == 'auto' ? {} : { width: '100%', height: '100%' };
        let imgHtml = data.map((item, i) => <div className="slideDiv" data-index={i} alt={`${item.title}...`} style={sdStyle}>
            <img style={imgStyle} onClick={openLinkUrl.bind(this,item.linkUrl,'3')} src={item.url} alt=''/>
            {
                showTitle == '1' && <div className={'portal-slide-title'} style={titleStyle}>
                    {item.title}
                </div>
            }
            <div className="slideDiv" onClick={openLinkUrl.bind(this,item.linkUrl,'3')} style={scStyle}></div>
            </div>);
        let html = null;
        switch (sposition) {
            case '1':
                html = <tbody>
            <tr>
            <td style={{width:'150px'}}>
    <div className="slideTitle">
            <div className="slideTitleFloat"></div>
            <div className="slideTitleNavContainer"></div>
            </div>
            </td>
            <td  width="*">
            <div  className="slideContinar" style={scStyle}>
            {imgHtml}
            </div>
            </td>
            </tr>
            </tbody>
        break;
    case '2':
        html = <tbody>
        <tr>
        <td width="*">
            <div  className="slideContinar" style={scStyle}>
            {imgHtml}
            </div>
            </td>
            <td style={{width:'150px'}}>
    <div className="slideTitle">
            <div className="slideTitleFloat"></div>
            <div className="slideTitleNavContainer"></div>
            </div>
            </td>
            </tr>
            </tbody>
        break;
    default:
        html = <tbody>
        <tr>
        <td>
        <div className="slideContinar" style={scStyle}>
            {imgHtml}
            </div>
            </td>
            </tr>
            <tr>
            <td>
            <div className="slideTitle">
            <div className="slideTitleFloat"></div>
            <div className="slideTitleNavContainer"></div>
            </div>
            </td>
            </tr>
            </tbody>
        break;
    }
        return <table style={{width:'100%',height:'165px',tableLayout: 'fixed',borderSpacing:0}} id={`slideArea_${eid}`} border="0" >
            {html}
            </table>
    }
}

//幻灯片播放图片效果
const loadSlideCss = (eid, isSetting = false, iconImgList, iconImg_overList, values) => {
    $('.homepage[data-isSetting='+isSetting+'] #slideArea_' + eid + ' .slideTitleNavContainer').empty();
    $('.homepage[data-isSetting='+isSetting+'] #slideArea_' + eid + ' .slideContinar').cycle({ //turnUp   //fade  //uncover
        fx: values['slide_t_changeStyle'], //blindX     * blindY    * blindZ    * cover    * curtainX    * curtainY    * fade    * fadeZoom    * growX    * growY    * none   * scrollUp    * scrollDown    * scrollLeft    * scrollRight    * scrollHorz    * scrollVert    * shuffle    * slideX    * lideY   * toss    * turnUp    * turnDown    * turnLeft    * turnRight    * uncover    * wipe    * zoom*/
        timeout: _s2Int(values['slide_t_AutoChangeTime']),
        pager: '.homepage[data-isSetting='+isSetting+'] #slideArea_' + eid + ' .slideTitleNavContainer',
        pagerAnchorBuilder: pagerFactory,
        before: function(currSlideElement, nextSlideElement, options, forwardFlag) {
            var nextIndex = $(nextSlideElement).attr("data-index");
            var slidnavtitleArray = $(".homepage[data-isSetting="+isSetting+"] #slideArea_" + eid + " .slidnavtitle");
            var newTop = 0;
            var newLeft = 0;
            if (slidnavtitleArray.length != 0) {
                var nextSlidnavtitle = $($(".homepage[data-isSetting="+isSetting+"] #slideArea_" + eid + " .slidnavtitle")[nextIndex]);
                newTop = nextSlidnavtitle.position().top;
                if (values['slide_t_position'] === '2') {
                    newLeft = nextSlidnavtitle.position().right;
                } else {
                    newLeft = nextSlidnavtitle.position().left;
                }
            }
            var topvalue = values['slide_t_position'] === '3' ? newTop - 10 : newTop;
            var backgroundsize=values['slide_t_picShow']=="normal"? "100% 100% ":"";
            if (values['slide_t_position'] === '2') {
                $(".homepage[data-isSetting="+isSetting+"] #slideArea_" + eid + " .slideTitleFloat").css({
                    "display": "block",
                    "top": topvalue,
                    "right": newLeft,
                    "background": "url(" + iconImg_overList[nextIndex] + ") no-repeat",
                    "background-size":backgroundsize
                });
            } else {
                $(".homepage[data-isSetting="+isSetting+"] #slideArea_" + eid + " .slideTitleFloat").css({
                    "display": "block",
                    "top": topvalue,
                    "left": newLeft,
                    "background": "url(" + iconImg_overList[nextIndex] + ") no-repeat",
                    "background-size":backgroundsize
                });
            }
        },
        fit: 1,
        width: '100%',
        height: '100%'
    });
    $('.homepage[data-isSetting='+isSetting+'] #slideArea_' + eid + ' .slideContinar').addClass("slideritem");
    $('.homepage[data-isSetting='+isSetting+'] #slideArea_' + eid + ' .slideContinar').css("width", "100%");
    $('.homepage[data-isSetting='+isSetting+'] #slideArea_' + eid + ' .slideContinar').css("overflow", "hidden");
    $('.homepage[data-isSetting='+isSetting+'] #content_view_id_' + eid).css("overflow", "hidden");
    function pagerFactory(idx, slide) {
        if (values['slide_t_position'] === '3') {
            var s = idx > 3 ? ' style="display:true"' : '';
        } else {
            var s = idx > 3 ? ' style="display:none"' : '';
        }
        var className = "";
        if(idx === 0){
            className="activeSlide";
        }
        if(values['slide_t_picShow']=="normal"){
            return '<div ' + s + ' class="slidnavtitle '+className+'"  style="background:url(' + iconImgList[idx] + ') no-repeat;background-size:100% 100%;">&nbsp;</div>';
        }else{
            return '<div ' + s + ' class="slidnavtitle '+className+'"  style="background:url(' + iconImgList[idx] + ') no-repeat;">&nbsp;</div>';
        }

    };

    if (values['slide_t_position'] === '3') {
        $(".homepage[data-isSetting="+isSetting+"] #slideArea_" + eid).find(".slideTitleNavContainer").css({
            "margin": "0 auto"
        });
        $(".homepage[data-isSetting="+isSetting+"] #slideArea_" + eid + " .slideTitleFloat").css({
            "margin": "0 auto",
            "top": 10 + Math.round($(".slideTitleFloat").offset().top) + "px"
        });
    }

    $('.homepage[data-isSetting='+isSetting+'] #slideArea_' + eid + ' .slideTitle').css("z-index", "1001");
    $('.homepage[data-isSetting='+isSetting+'] #slideArea_' + eid + ' .slideTitle').css("position", "relative");
    if (values['slide_t_position'] === '1') {
        $('.homepage[data-isSetting='+isSetting+'] #slideArea_' + eid + ' .slideTitle').css("width", "150px");
        $('.homepage[data-isSetting='+isSetting+'] #slideArea_' + eid + ' .slideTitle').css("float", "left");
    }
    if (values['slide_t_position'] === '2') {
        $('.homepage[data-isSetting='+isSetting+'] #slideArea_' + eid + ' .slideTitle').css("width", "150px");
        $('.homepage[data-isSetting='+isSetting+'] #slideArea_' + eid + ' .slideTitle').css("float", "right");
    }

    if (values['slide_t_position'] === '3') {
        $('.homepage[data-isSetting='+isSetting+'] #slideArea_' + eid + ' .slideTitle').css("height", "40px");
        $('.homepage[data-isSetting='+isSetting+'] #slideArea_' + eid + ' .slideTitle').css("padding-top", "10px");
        $('.homepage[data-isSetting='+isSetting+'] #slideArea_' + eid + ' .slideTitle').css("text-align", "center");
    }

    var slidnavtitle = $('.homepage[data-isSetting='+isSetting+'] #slideArea_' + eid + ' .slideTitle  .slidnavtitle');
    slidnavtitle.css("cursor", "pointer");
    if (values['slide_t_position'] === '3') {
        slidnavtitle.css("margin-right", "5px");
        slidnavtitle.css("height", "40px");
        slidnavtitle.css("width", "75px");
        slidnavtitle.css("float", "left");
    } else {
        slidnavtitle.css("height", "40px");
    }

    var slidnavtitle = $('.homepage[data-isSetting='+isSetting+'] #slideArea_' + eid + ' .slideTitleFloat');
    slidnavtitle.css("position", "absolute");
    slidnavtitle.css("display", "block");

    if (values['slide_t_position'] === '3') {
        slidnavtitle.css("height", "40px");
        slidnavtitle.css("width", "79px");
    } else {
        slidnavtitle.css("height", "40px");
        slidnavtitle.css("width", "165px");
    }
    var slideContinar = $('.homepage[data-isSetting='+isSetting+'] #slideArea_' + eid + ' .slideContinar');
    var slideDev = $('.homepage[data-isSetting='+isSetting+'] #slideArea_' + eid + ' .slideDiv');
    slideContinar.css("padding", "0");
    slideContinar.css("overflow", "hidden");
    slideContinar.css("table-layout", "fixed");
    slideContinar.css("width", "100%");
    slideContinar.css("margin", "0");

    if (values['slide_t_position'] === '3') {
        slideContinar.css("height", "220px");
        slideDev.css("height", "220px");
    } else {
        slideContinar.css("height", "160px");
        slideDev.css("height", "160px");
    }
    var slideTitleNavContainer = $(".homepage[data-isSetting="+isSetting+"] #slideArea_" + eid).find(".slideTitleNavContainer");
    if (values['slide_t_position'] === '3') {
        slideTitleNavContainer.css("display", "inline-block");
        slideTitleNavContainer.css("_display", "block");
    }
}


import { WeaErrorPage, WeaTools } from 'ecCom';
class MyErrorHandler extends React.Component {
    render() {
        const hasErrorMsg = this.props.error && this.props.error !== "";
        return (
            <WeaErrorPage ecId={`${this && this.props && this.props.ecId || ''}_WeaErrorPage@88blac`} msg={hasErrorMsg?this.props.error:getLabel(385218,"对不起，该页面异常，请联系管理员！")} />
    );
    }
}
SlideCom = WeaTools.tryCatch(React, MyErrorHandler, { error: "" })(SlideCom);
export default SlideCom;